<template>
  <div class="bottom">
      <router-link to="/index/home" class="index"><span></span>首页</router-link>
      <router-link to="/index/fenlei" class="fenlei"><span></span>分类</router-link>
      <router-link to="/index/gouwuche" class="gouwuche"><span></span>购物车</router-link>
      <router-link to="/index/shoucang" class="shoucang"><span></span>收藏</router-link>
      <router-link to="/index/me" class="me"><span></span>我的</router-link>
  </div>
</template>



<script>
export default {
    
}
</script>

<style lang="less" rel="stylesheet/less">
.bottom{
    width:100%;
    height:0.98rem;
    position:fixed;
    left:0;
    bottom:0;
    display:flex;
    border-top:1px solid #F3F3F3;
    background:#fff;
    a{
        width:20%;
        height:0.98rem;
        text-align:center;
        font-size:0.22rem;
        color:#A1A9B5;
        span{
            display:block;
            margin:0.16rem auto 0.08rem;
            height:0.36rem;
        }
        &.active{
            color:#00D397;
        }
    }
    .index{
        span{
            width:0.37rem;
            background:url('index.png') no-repeat;
            background-size:100% 100%;
        }
        &.active{
            span{
                background:url('index-active.png') no-repeat;
                background-size:100% 100%;
            }
        }
    }
    .fenlei{
        span{
            width:0.35rem;
            background:url('fenlei.png') no-repeat;
            background-size:100% 100%;
        }
        &.active{
            span{
                background:url('fenlei-active.png') no-repeat;
                background-size:100% 100%;
            }
        }
    }
    .gouwuche{
        span{
            width:0.41rem;
            background:url('gouwuche.png') no-repeat;
            background-size:100% 100%;
        }
        &.active{
            span{
                background:url('gouwuche-active.png') no-repeat;
                background-size:100% 100%;
            }
        }
    }
    .shoucang{
        span{
            width:0.39rem;
            background:url('shoucang.png') no-repeat;
            background-size:100% 100%;
        }
        &.active{
            span{
                background:url('shoucang-active.png') no-repeat;
                background-size:100% 100%;
            }
        }
    }
    .me{
        span{
            width:0.39rem;
            background:url('me.png') no-repeat;
            background-size:100% 100%;
        }
        &.active{
            span{
                background:url('me-active.png') no-repeat;
                background-size:100% 100%;
            }
        }
    }
}
</style>

